<template>
  <div class="order-footer">
    <div class="footer">
      <div class="footer-text">订单选项</div>
      <van-field
        v-model="time"
        is-link
        readonly
        label="取餐时间"
        placeholder=""
        @click="editTime = true"
      >
      </van-field>
      <van-field
        v-model="tableware"
        is-link
        readonly
        label="餐具选项"
        placeholder=""
        @click="editTableware = true"
      />
      <van-cell
        title="备注"
        :value="orderStore.note"
        is-link
        arrow-direction="right"
        @click="editNote = true"
      ></van-cell>

      <van-popup v-model:show="editTime" round position="bottom">
        <van-picker
          :columns="timeColumns"
          @cancel="editTime = false"
          @confirm="timeConfirm"
        />
      </van-popup>

      <van-popup v-model:show="editTableware" round position="bottom">
        <van-picker
          :columns="tablewareColumns"
          @cancel="editTableware = false"
          @confirm="tablewareConfirm"
        />
      </van-popup>
      <van-popup
        v-model:show="editNote"
        round
        closeable
        position="bottom"
        teleport="body"
        :style="{ height: '30%' }"
      >
        <van-field
          class="note"
          v-model="orderStore.note"
          style="background-color: #f7f7f7"
          rows="7"
          autosize
          label="备注"
          type="textarea"
          maxlength="100"
          placeholder="请输入备注"
          show-word-limit
        />
        <van-button
          style="margin-right: 2vw"
          color="#16A085"
          @click="addNote('不要香菜')"
          >不要香菜</van-button
        >
        <van-button
          style="color: #112af4; margin-right: 2vw"
          plain
          @click="addNote('不要辣')"
          >不要辣</van-button
        >
        <van-button
          style="margin-right: 2vw"
          color="#D68910"
          @click="addNote('微辣')"
          >微辣</van-button
        >
        <van-button
          style="margin-right: 2vw"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          @click="addNote('多放点辣')"
        >
          多放点辣
        </van-button>
        <van-button
          style="margin-right: 2vw"
          color="#cb4335"
          @click="addNote('放桌子上')"
          >放桌子上</van-button
        >
      </van-popup>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useorderStore } from "@/store/modules/module.js";
const orderStore = useorderStore();
const editTime = ref(false);
const editTableware = ref(false);
const editNote = ref(false);
const timeColumns = [
  { text: "尽快取餐", value: "now" },
  { text: "15分钟内", value: "15min" },
  { text: "半小时内", value: "30min" },
  { text: "一小时内", value: "1hour" },
  { text: "一小时后", value: "later" },
];
const tablewareColumns = [
  { text: "无需餐具", value: "not-need" },
  { text: "需要餐具", value: "need" },
];

const time = ref("尽快取餐");
const tableware = ref("无需餐具");

const timeConfirm = ({ selectedOptions }: any) => {
  editTime.value = false;
  time.value = selectedOptions[0].text;
  orderStore.pickupTime = selectedOptions[0].text;
};

const tablewareConfirm = ({ selectedOptions }: any) => {
  editTableware.value = false;
  tableware.value = selectedOptions[0].text;
  orderStore.tableware = selectedOptions[0].text;
};

const addNote = (note: string) => {
  orderStore.note = orderStore.note + "#" + note + " ";
};
</script>

<style lang="less" scoped>
.order-footer {
  margin-left: 4vw;
  margin-right: 4vw;
  margin-top: 2vw;
  padding: 1vw;
  border-radius: 4vw;
  background-color: #ffffff;
  .footer {
    max-height: 40vh;
    overflow-y: scroll;
    .footer-text {
      font-size: 4vw;
      font-weight: 800;
      padding: 2vw 2vw;
    }
    van-contact-card {
      height: 20vh;
    }
  }
}
</style>
<style>
:root:root {
  --van-contact-card-title-line-height: 4vw;
  --van-dialog-message-line-height: 6vw;
  --van-field-label-width: 15vw;
}
</style>
